<template>
  <div class="audit-flow">
    <!-- 审核步骤可视化（匹配图像中的蓝色主题） -->
    <div 
      v-for="(step, index) in steps"
      :key="index"
      class="step-item"
      :style="{
        borderLeft: `3px solid ${getStepColor(step.status)}`,
        height: '40px'
      }"
    >
      <deepin-icon 
        :name="step.icon" 
        :color="getStepColor(step.status)"
        size="16"
      />
      <span class="step-text">{{ step.label }}</span>
      <span 
        v-if="step.status === 'rejected'"
        class="reject-tag"
      >
        驳回代码：{{ step.rejectCode }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const steps = ref([
  { label: '格式校验', status: 'passed', icon: 'check-circle' },
  { label: '安全扫描', status: 'processing', icon: 'clock' },
  { label: '人工审核', status: 'rejected', icon: 'alert-circle', rejectCode: 'SEC-403' }
])

const getStepColor = (status) => ({
  passed: '#1890ff',
  processing: '#faad14',
  rejected: '#ff4d4f'
}[status])
</script>

<style scoped>
.audit-flow {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 12px;
}

.step-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #fafafa;
}

.step-text {
  margin-left: 8px;
  color: #333;
}

.reject-tag {
  margin-left: auto;
  color: #ff4d4f;
  font-size: 12px;
}
</style>